<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%String msg=(String)request.getAttribute("msg"); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="author" content="mironcoder" />
  <meta name="email" content="mironcoder@gmail.com" />
  <meta name="profile" content="https://themeforest.net/user/mironcoder" />
  <meta name="template" content="Organe" />
  <meta name="title" content="Organe - Organic Food HTML Template" />
  <meta name="keywords" content="organe, organic, food, shop, ecommerce, store, html, agriculture, vegetable, organic food, organic product, organic farm, organic life, organic shop, food store" />
  <title>Organe - Register</title>
  <link rel="icon" href="images/favicon.png" />
  <link rel="stylesheet" href="static/css/icofont.min.css" />
  <link rel="stylesheet" href="static/css/bootstrap.min.css" />
  <link rel="stylesheet" href="static/css/main.css" />
  <link rel="stylesheet" href="static/css/user-form.css" />
</head>
<body>
	<section class="user-form-part">
   <div class="container">
    <div class="row justify-content-center">
     <div class="col-12 col-sm-10 col-md-8 col-lg-6 col-xl-5">
      <div class="user-form-logo">
       <a href="index.html"><img src="static/picture/logo.png" alt="logo" /></a>
      </div>
      <div class="user-form-card" style="height: 480px">
       <div class="user-form-title">
        <h2>Join Now!</h2>
        <p>Setup A New Account In A Minute</p>
       </div>
       <form class="user-form" action="UserServlet" method="post">
       <input type="hidden" name="flag" value="reg"/>
        <div class="form-group" >
         <input type="text" class="form-control" name="user" id="user" placeholder="请输入用户名" onkeyup="findByName()"/>
         <p id="u"></p>
        </div>
        <div class="form-group">
         <input type="text" class="form-control"  name="tel" id="tel" placeholder="请输入手机号" onkeyup="findByTel()"/>
         <p id="t"></p>
        </div>
        <div class="form-group">
         <input type="password" class="form-control" name="pass" id="pass" placeholder="请输入密码" onkeyup="findByPass()"/>
         <p id="p"></p>
        </div>
        <div class="form-button">
       	 管理员：<input type="radio" name="type" value="0"/>&nbsp;&nbsp;&nbsp;&nbsp;
		普通用户：<input type="radio" name="type" value="1"/>
         <button type="submit" id="reg" >注册</button>
         <%if(msg!=null){ %>
         <p style="color: red"><%=msg%></p>
         <%} %>
        </div>
       </form>
      </div>
      <div class="user-form-remind">
       <p>Already Have An Account?<a href="login.jsp">去登录</a></p>
      </div>
      <div class="user-form-footer">
       <p>Organe | &copy; Copyright by <a href="#">Mironcoder</a></p>
      </div>
     </div>
    </div>
   </div>
  </section>
  <script type="text/javascript" src="jq/jquery-1.8.3.js"></script>
  <script src="static/js/jquery-1.12.4.min.js"></script>
  <script src="static/js/popper.min.js"></script>
  <script src="static/js/bootstrap.min.js"></script>
  <script type="text/javascript">
 
  $(function(){
	  $("#reg").prop("disabled",true);
	});
  	function findByPass(){
  		$.post(
  			"UserServlet",
  			{passName:$("#pass").val(),flag:"findByPass"},
  			function(data){
  				if(data=="可用"){
  					$("#p").text("密码可用");
  					$("#p").css("color","green");
  					if($("#p").text()=="密码可用" && $("#t").text()=="手机号码可用" && $("#u").text()=="用户名可用"){
  						$("#reg").prop("disabled",false);
  					}else{
  						$("#reg").prop("disabled",true);
  					}
  				}else{
  					$("#p").text("密码不能为空");
  					$("#p").css("color","red");
  					$("#reg").prop("disabled",true);
  				}
  			},
  			"text"
  		)
  	}
  	function findByTel(){
  		$.post(
  			"UserServlet",
  			{telName:$("#tel").val(),flag:"findByTel"},
  			function(data){
  				if(data=="可用"){
  					$("#t").text("手机号码可用");
					$("#t").css("color","green");
					if($("#p").text()=="密码可用" && $("#t").text()=="手机号码可用" && $("#u").text()=="用户名可用"){
  						$("#reg").prop("disabled",false);
  					}else{
  						$("#reg").prop("disabled",true);
  					}
  				}else{
  					$("#t").text("请输入正确的手机号码,手机号码重复");
					$("#t").css("color","red");
					$("#reg").prop("disabled",true);
					if($("tel").val()==null&&$("#tel").val()==""){
  						$("#t").text("手机号码不能为空");
  		  			}
  				}
  			},
  			"text"
  		)
  	}
  	function findByName(){
  		$.post(
  			"UserServlet",
  			{userName:$("#user").val(),flag:"findByName"},
  			function(data){
  				if(data=="可用"){
  	  				$("#u").text("用户名可用");
  					$("#u").css("color","green");
  					if($("#p").text()=="密码可用" && $("#t").text()=="手机号码可用" && $("#u").text()=="用户名可用"){
  						$("#reg").prop("disabled",false);
  					}else{
  						$("#reg").prop("disabled",true);
  					}
  	  			}else{
  	  				$("#u").text("用户名重复");
  					$("#u").css("color","red");
  					$("#reg").prop("disabled",true);
  					if($("user").val()==null&&$("#user").val()==""){
  						$("#u").text("用户名不能为空");
  		  			}
  				} 
  			},
  			"text"
  		)
  	}
  </script>
</body>
</html>